<template>
	<view style="width: 100%;">
		<view style="top:30px;left:0px;bottom:60px;right:0px;overflow:auto;">
			<view id="panel" style="width:100%;margin:0px auto;overflow:auto;">
				<view class="panel-top">
					<view style="width:100%;background:rgb(253 , 237 , 215);overflow:hidden;">
						<view style="width:90%;margin:10px auto;color:rgb(151 , 108 , 52);font-size:11px;line-height:14px;">
							认证医生提供健康建议，10分钟内回复，已积累帮助患者解决2000万个健康问题，好评率99%
						</view>
					</view>
					<view style="width:100%;background:white;">
						<view style="display:flex;width:100%;height:50px;width:94%;margin:0px auto;">
							<view style="line-height:50px;width:60px;">病例概述</view>
							<view style="flex-grow:1;margin-left:2px;">
								<input @input="getGaishu" style="font-size:14px;border:0px;line-height:50px;width:100%;height:100%;" type="text" class="mui-input-clear" placeholder="请用一句话概述病情，10-20字左右">
							</view>
						</view>
						<view style="width:94%;margin:0px auto;height:1px;background:#e8e8e8;"></view> 
						<view style="display:flex;width:100%;width:94%;margin:0px auto;">
							<view style="line-height:50px;width:60px;">病例概述</view>
							<view style="flex-grow:1;margin-left:2px;">
								<textarea @input="getGaishuDetail" style="font-size:14px;border:0px;width:100%;height:70px;line-height:20px;margin-top:5px;" type="text" class="mui-input-clear" placeholder="请详细描述症状，发病时间，部位以及现在的用药情况，我们按照您的描述向两位医生进行留言，请耐心等待"></textarea>
							</view>
						</view>
						<view style="width:94%;margin:0px auto;height:1px;background:#e8e8e8;"></view>
						<view style="display:flex;width:94%;margin:0 auto;">
							<view id="file_list" style="height:80px;display:flex;"></view>
							<view style="width:60px;height:80px;" @tap="chooseImage">
								<view id="file_select" style="width:55px;height:55px;display:flex;align-items:center;margin:0 auto;border:1px dashed #8a8a8a;margin:10px auto;">
									<image :src="switchImg()" style="width:55px;height:55x;display:block;margin:0 auto;" mode="widthFix">
								</view>
							</view>
							<view id="file_msg" style="flex-grow:1;margin-left:2px;height:80px;">
								<input style="font-size:14px;border:0px;line-height:80px;width:100%;height:100%;" type="text" class="mui-input-clear" disabled placeholder="添加患处，检查报告或其他辅助诊疗的资料">
							</view>
						</view>
						<view style="width:94%;margin:0px auto;height:1px;background:#e8e8e8;"></view>
						<view style="height:60px;display:flex;width:94%;margin:0 auto;align-items:center;justify-content:space-between;">
							<view style="display:flex;align-items:center;">
								<view style="line-height:60px;">性别：</view>
								<view class="sex_item" @click='select_sex(1)' :class="sex=='男' ? 'nan' : 'nv'" style="width:40px;height:30px;margin:20px 10px;text-align:center;line-height:30px;">男</view>
								<view class="sex_item" @click='select_sex(2)' :class="sex=='女' ? 'nan' : 'nv'" style="width:40px;height:30px;margin:20px 0px;text-align:center;line-height:30px;">女</view>
							</view>
							<view style="width:130px;display:flex;align-items:center;">
								<view style="">年龄：</view>
								<view style="flex-grow:1;height:26px;border-bottom:1px solid beige;">
									<input @input="getAge" style="font-size:14px;border:0px;line-height:26px;width:70px;height:100%;text-align:left;" type="text" placeholder="请输入">
								</view>
								<view>岁</view>
							</view>
						</view>
					</view>
					<view style="width:94%;background:white;border-radius:5px;margin:15px auto;">
						<view style="height:50px;border-bottom:1px solid #e8e8e8;">
							<input @input="getPhone" style="font-size:14px;border:0px;line-height:50px;width:100%;height:100%;" type="text" class="mui-input-clear" placeholder="请输入手机号码">
						</view>
						<view style="height:50px;display:flex;">
							<input @input="getCode" style="font-size:14px;border:0px;line-height:50px;width:100%;height:100%;flex-grow:1;display:block;" type="text" class="mui-input-clear" placeholder="请输入验证码">
							<view @click="sendCode()" style="width:130px;text-align:center;font-size:12px;color:blue;line-height:50px;">{{wenzi}}</view>
						</view>
					</view>
					<view style="width:94%;background:white;border-radius:5px;margin:0 auto;">
						<view style="height:50px;border-bottom:1px solid #e8e8e8;">
							<input @input="getWeixinhao" style="font-size:14px;border:0px;line-height:50px;width:100%;height:100%;" type="text" class="mui-input-clear" placeholder="填写您的微信号">
						</view>
					</view>
					<view style="width:94%;background:white;border-radius:5px;margin:15px auto;">
						<view style="height:50px;border-bottom:1px solid #e8e8e8;">
							<input @input="getSfz" style="font-size:14px;border:0px;line-height:50px;width:100%;height:100%;" type="text" class="mui-input-clear" placeholder="填写您的身份证号码">
						</view>
					</view>
					<view style="width:94%;background:white;height: 30px;margin:15px auto;"></view>
				</view>
			</view>
		</view>
		<view id="bottom" style="position:fixed;z-index: 100;left:0px;right:0px;bottom:0px;height:60px;width: 100%;background:white;">
			<view style="height:60px;">
				<view @click='submit_m()' style="width:90px;height:60px;line-height:60px;text-align:center;background:rgb(0 , 180 , 0);color:white;float:right;">确定提交</view>
				<view @click='go_history()' style="width:90px;height:60px;line-height:60px;text-align:center;background:black;color:white;float:right;">历史记录</view>
			</view>
		</view>
		<input type="file" style="display:none;" id="file" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gaishu:'',		//病情概述
				gaishuDetail:'',//病情概述详情
				age:'',			//年龄
				phone:'',		//手机号码
				code:'',		//验证码
				weixinhao:'',	//微信号
				sfz:'',			//身份证号码
				sex:'男',		//性别
				wenzi:'发送验证码',//验证码文字
				miao:60,		//验证码秒数
				imgs:'',		//病情图片
			}
		},
		methods: {
			switchImg(){
				if(!this.isNull(this.imgs)){
					return this.host+"/tmp/"+this.imgs
				}
			},
			// 历史记录
			go_history(){
				uni.navigateTo({
					url:'myZixunHistory'
				})
			},
			// 确认提交
			submit_m(){
				if(!uni.getStorageSync('logined')){
					uni.$u.toast("请先登录")
					return 
				}
				// console.log("概述："+this.gaishu+" 概述详情："+this.gaishuDetail+" 性别："+this.sex+" 年龄："+this.age+" 手机号码："+this.phone+" 验证码："+this.code+" 微信号："+this.weixinhao+" 身份证："+this.sfz)
				if(this.gaishu == undefined || this.gaishu == "") {
					uni.$u.toast("请用一句话概述一下问题")
					return 
				}
				if(this.gaishuDetail == undefined || this.gaishuDetail == "") {
					uni.$u.toast("请填写详细病情")
					return 
				}
				if(this.age == undefined || this.age == "" || this.age > 120 || this.age < 0) {
					uni.$u.toast("年龄不合法")
					return 
				}
				if(this.phone == undefined || this.phone == "" || this.phone.toString().trim().length != 11) {
					uni.$u.toast("手机号码格式不对")
					return 
				}
				if(this.code == undefined || this.code == "") {
					uni.$u.toast("请填写验证码")
					return 
				}
				if(this.weixinhao == undefined || this.weixinhao == "") {
					uni.$u.toast("请填写微信号")
					return 
				}
				if(this.sfz == undefined || this.sfz == "") {
					uni.$u.toast("身份证号码不能为空")
					return 
				}
				if(this.sfz.trim().length != 18) {
					uni.$u.toast("身份证号码格式不对")
					return
				}
				//用户信息  icon,nick,openId
				this.$http.get('/zixun.do',{
					p:'addXcxZixun',
					simple:this.gaishu,
					desc:this.gaishuDetail,
					sex:this.sex,
					age:this.age,
					phone:this.phone,
					code:this.code,
					wx:this.weixinhao,
					sfz:this.sfz,
					imgs:this.imgs,
					userId:uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data=="success"){
						uni.$u.toast("您的询问请求已经发送成功，请等候医生的回复")
					}else{
						uni.$u.toast(res.data)
					}
					setTimeout(() => {
						location.reload()
					},500)
				})
			},
			//发送验证码
			sendCode(){
				// console.log("手机号码："+this.phone)
				if(this.phone == undefined || this.phone == "" || this.phone.toString().trim().length != 11) {
					uni.$u.toast("手机号码格式不对")
					return 
				}
				this.$http.get('/zixun.do',{
					p:'code',
					phone:this.phone
				}).then(res => {
					if(res.data=="success"){
						// this.wenzi = this.miao+"(s)后再获取"
						var that = this;
						const fn = setInterval(function() {
							that.wenzi = that.miao + '(s)后再获取';
							that.miao = that.miao - 1;
							if (that.miao == 0) {
								that.wenzi = "发送验证码";
								clearInterval(fn);
							}
						}, 1000);
					}else{
						uni.$u.toast("手机号码格式不对")
						return
					}
				})
			},
			select_sex(n){
				if(n==1){
					this.sex = '男'
				}else{
					this.sex = '女'
				}
			},
			getGaishu(e){
				this.gaishu=e.target.value;
			},
			getGaishuDetail(e){
				this.gaishuDetail=e.target.value;
			},
			getAge(e){
				this.age=e.target.value;
			},
			getAge(e){
				this.age=e.target.value;
			},
			getPhone(e){
				this.phone=e.target.value;
			},
			getCode(e){
				this.code=e.target.value;
			},
			getWeixinhao(e){
				this.weixinhao=e.target.value;
			},
			getSfz(e){
				this.sfz=e.target.value;
			},
			// 转换图片显示地址
			switchIcon(){
				if(this.icon.length>0)
					return this.host+this.icon;
				else
					return '../../static/center/yuantiao.jpg';
			},
			// 选择图片
			chooseImage: async function() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif
				uni.chooseImage({
					// count: this.imageList.length + this.count[this.countIndex] > 5 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						let url = this.host+"/upload";
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						// console.log(this.imageList);
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: url, 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								this.imgs = JSON.parse(res.data).data
								// console.log("图片："+this.imgs)
								// console.log(this.host+"/tmp/"+this.imgs);
								// 服务器返回的图片地址存储起来
								// this.serverImageList.push( JSON.parse(res.data).data );
							}
						});
					},
					fail: (err) => {
						// console.log("err: ",err);
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						if(err.errMsg.indexOf('cancel') !== '-1'){
							return;
						}
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			// 判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	*{margin:0px;padding:0px;font-size:14px;}
	#panel .panel-top{
		width:100%;
		display:flex;
		flex-direction:column;
		justify-content:center;
	}
	input,textarea{
		padding: 0 0 0 15px;
	}
	.nan{
		background:#17ca17;
	}
	.nv{
		background:rgb(238,238,238);
	}
</style>
